<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 22:36:29
 * @LastEditors: Sam
 * @LastEditTime: 2022-06-02 17:00:01
-->
<template>
  <el-form ref="form" :model="data" :rules="rules" label-width="100px">
    <el-form-item :label="'昵称'" prop="nickname">
      <el-input v-model.trim="data.nickname" :placeholder="'请填写昵称'" />
    </el-form-item>
     <el-form-item :label="'手机号'" prop="mobile">
      <el-input v-model.trim="data.mobile" :placeholder="'请填写手机号'" />
    </el-form-item>
       <el-form-item :label="'openid'" prop="openid" >
      <el-input v-model.trim="data.openid" :placeholder="'请填写openid'" />
    </el-form-item>
    <el-form-item :label="'头像'" v-loading="loading">
          <el-upload
               :action="$store.state.settings.file_upload_url"
              :headers ="headerObj"
              :limit=1
              list-type="picture-card"
              :file-list="data.avatarfileList"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              :on-success="handleavatarSuccess"
              :before-upload="beforeavatarUpload"
              :on-exceed="handleavatarExceed"
              :on-preview="handleavatarPreview"
              :on-remove="handleavatarRemove">
                <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" append-to-body width="30%">
                <img width="100%" :src="previewUrl" alt="">
          </el-dialog>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"    icon="el-icon-check" :disabled="$store.state.settings.ajaxButton" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
<script>
import { create } from '@/api/user_list'
import { getToken } from '@/utils/auth'

export default {
  name: 'UserCreate',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      previewUrl: '',
      dialogVisible: false,
      isEditorDisabled: false,
      loading:false,
      headerObj: {
            'Authorization': 'Bearer ' + getToken()
        },
      rules: {
        mobile: [
          { required: true, message: '手机不能为空', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ]
      },
      dialogImageUrl :'',
      data: {
        mobile: '',
        nickname: '',
        avatar: '', 
        introduce: '',
        info :'',
        openid:'',
        avatarfileList: []
      }
    }
  },
  created() {
   
  },
  methods: {
    handleavatarExceed(){ 
      this.$message.error('只能上传一张图片');
    },
  handleavatarPreview(file){
        this.dialogVisible = true;
        this.previewUrl = file.url;
    },
  handleavatarRemove(){
        this.data.avatar = '';
    },
    handleavatarSuccess(response, file, fileList) {
      this.$store.commit('settings/SET_AJAX_BUTTON', false);
      this.data.avatar= response.data.src;
  },
    handleavatarRemove(file,fileList) {
      const that = this;
      // 1.获取将要删除图片的临时路径
      const fileSrc = file.response.data.src
      // 2.找到图片对应的索引值
      this.data.avatar.forEach(function(element,key) {
        if(element.url === fileSrc){
          that.data.avatar.splice(key, 1);//传给后台的图片
        }
      });
    },
     handleavatarSuccess(response, file, fileList) {
        this.$store.commit('settings/SET_AJAX_BUTTON', false);
        this.data.avatar =  response.data.src
        this.$message.success('上传成功');
      },

     beforeavatarUpload(file) {
        this.$store.commit('settings/SET_AJAX_BUTTON', true);
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG 、PNG格式!');
          this.loading =false;
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 5MB!');
           this.loading =false;
        }
      },
    
    submit() {
 
      const thiz = this

      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }
        create(this.data).then(response => {
          this.$store.commit('settings/SET_AJAX_BUTTON', true);
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 1500,
            onClose() {
              if (thiz.$refs.form !== undefined) {
                    thiz.$refs.form.resetFields()
                    thiz.data.avatarfileList = [];
              }
              thiz.item.dialogVisible = false
            }
          })
        })
      })
    }
  }
}
</script>
